<template>
    <div class="Tabs">
        <el-form label-width="100px">
            <el-form-item label="背景颜色">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="list.BgColor" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{list.BgColor ='#fdf6ec'}">重置</el-button>
                </div>
            </el-form-item>
            <!-- <el-form-item label="图标颜色">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="list.IconColor" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{list.IconColor ='#f90'}">重置</el-button>
                </div>
            </el-form-item> -->
            <el-form-item label="文字颜色">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="list.FontColor" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{list.FontColor ='#f90'}">重置</el-button>
                </div>
            </el-form-item>
            <el-form-item label="滚动速度">
                <div style="display: flex;align-items: center;">
                    <el-input v-model="list.number" placeholder="请输入公告内容" clearable type="number" min="1000"></el-input>
                </div>
            </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <p class="TipsText">建议 (最多{{ len }}个，可拖动排序）</p>
        <el-button size="small" style="margin-bottom: 10px;" type="primary" @click="toggleSearchPopup"><i class="el-icon-plus"></i> 添加公告</el-button>
        <div class="DraggableView">
            <template v-if="list.data && list.data.length > 0">
                <vuedraggable v-model="list.data" tag="ul" draggable="li" v-if="list.data && list.data.length > 0" class="list">
                    <li v-for="(item,index) in list.data" :key="index">
                        <div>排序{{index+1}}</div>
                        <el-input v-model="item.name" placeholder="请输入公告内容" clearable type="textarea" :rows="2"></el-input>
                        <span @click="removeImage(index)" v-if="index != 0" class="el-icon-close"></span>
                    </li>
                </vuedraggable>
            </template>
        </div>

    </div>
</template>

<script>
    import vuedraggable from 'vuedraggable'
    export default {
        name: 'Notice',
        components: {
            vuedraggable
        },
        props: {
            data: {
                type: Object,
                default: () => {}
            }
        },
        data() {
            return {
                list: {}
            }
        },
        computed: {
            len() {
                return this.list.type == 'Notice' ? 8 : 10
            }
        },
        mounted() {
            this.list = this.data
        },
        methods: {
            toggleSearchPopup() {
                let data = {
                    name: '公告' + (this.list.data.length + 1),
                    value: this.list.data.length + 1
                }
                this.list.data.push(data)
            },
            removeImage(index) {
                this.list.data.splice(index, 1)
            },
        },
    }
</script>

<style lang="less" scoped>
    .Tabs {
        padding: 0 20px;

        .TipsText {
            margin: 10px 0;
            color: #999;
            font-size: 14px;
        }

        .DraggableView {
            height: 400px;
            overflow-y: auto;
            padding: 10px 20px 40px 10px;
            box-shadow: 0 2px 6px #ccc;

            li {
                background: #f5f5f5;
                padding: 10px;
                position: relative;
                margin-bottom: 10px;

                div {
                    margin-bottom: 10px;
                }

                span {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                }
            }
        }
    }
</style>